<template>
<view :class="'shade ' + (isShow?'show':'')">
    <view class="selector-area box box-tb">
        <view class="handle-bar box box-lr box-align-center">
            <text @tap="cancel" class="btn cancel flex">取消</text>
            <text @tap="confirm" class="btn confirm flex">确定</text>
        </view>
        <view class="area-selector box box-lr">
            <scroll-view class="selector province flex" data-type="province" scroll-y="true">
                <view v-for="(item, index) in proviceData" :key="index" @tap="tapProvince" :class="'picker ' + (selectedProvince.index==index?'actived':'')" :data-code="item.code" :data-full-name="item.fullName" :data-index="index">{{item.fullNameDot}}</view>
            </scroll-view>
            <scroll-view class="selector city flex" data-type="city" scroll-y="true">
                <view v-for="(item, index) in cityData" :key="index" @tap="tapCity" :class="'picker ' + (selectedCity.index==index?'actived':'')" :data-code="item.code" :data-full-name="item.fullName" :data-index="index">{{item.fullNameDot}}</view>
            </scroll-view>
            <scroll-view class="selector district flex" data-type="district" scroll-y="true">
                <view v-for="(item, index) in districtData" :key="index" @tap="tapDistrict" :class="'picker ' + (selectedDistrict.index==index?'actived':'')" :data-code="item.code" :data-full-name="item.fullName" :data-index="index">{{item.fullNameDot}}</view>
            </scroll-view>
        </view>
    </view>
</view>
</template>

<script>

var _util = require("../utils/util.js"),
    API = "http://japi.zto.cn/zto/api_utf8/baseArea?msg_type=GET_AREA&data=",
    selectArea = {
  addDot: function (e) {
    e instanceof Array && e.map(function (e) {
      return 4 < e.fullName.length ? e.fullNameDot = e.fullName.slice(0, 4) + "..." : e.fullNameDot = e.fullName, e;
    });
  },
  load: function (a) {
    a.setData({
      isShow: !1
    }), (0, _util.Promise)(wx.request, {
      url: API + "0",
      method: "GET"
    }).then(function (e) {
      var t = e.data.result[0];
      return selectArea.addDot(e.data.result), a.setData({
        proviceData: e.data.result,
        "selectedProvince.index": 0,
        "selectedProvince.code": t.code,
        "selectedProvince.fullName": t.fullName
      }), (0, _util.Promise)(wx.request, {
        url: API + t.code,
        method: "GET"
      });
    }).then(function (e) {
      var t = e.data.result[0];
      return selectArea.addDot(e.data.result), a.setData({
        cityData: e.data.result,
        "selectedCity.index": 0,
        "selectedCity.code": t.code,
        "selectedCity.fullName": t.fullName
      }), (0, _util.Promise)(wx.request, {
        url: API + t.code,
        method: "GET"
      });
    }).then(function (e) {
      var t = e.data.result[0];
      selectArea.addDot(e.data.result), a.setData({
        districtData: e.data.result,
        "selectedDistrict.index": 0,
        "selectedDistrict.code": t.code,
        "selectedDistrict.fullName": t.fullName
      });
    }).catch(function (e) {
      console.log(e);
    });
  },
  tapProvince: function (t, a) {
    var l = t.currentTarget.dataset;
    (0, _util.Promise)(wx.request, {
      url: API + l.code,
      method: "GET"
    }).then(function (e) {
      return selectArea.addDot(e.data.result), a.setData({
        cityData: e.data.result,
        "selectedProvince.code": l.code,
        "selectedProvince.fullName": l.fullName,
        "selectedCity.code": e.data.result[0].code,
        "selectedCity.fullName": e.data.result[0].fullName
      }), (0, _util.Promise)(wx.request, {
        url: API + e.data.result[0].code,
        method: "GET"
      });
    }).then(function (e) {
      selectArea.addDot(e.data.result), a.setData({
        districtData: e.data.result,
        "selectedProvince.index": t.currentTarget.dataset.index,
        "selectedCity.index": 0,
        "selectedDistrict.index": 0,
        "selectedDistrict.code": e.data.result[0].code,
        "selectedDistrict.fullName": e.data.result[0].fullName
      });
    }).catch(function (e) {
      console.log(e);
    });
  },
  tapCity: function (t, a) {
    var l = t.currentTarget.dataset;
    (0, _util.Promise)(wx.request, {
      url: API + l.code,
      method: "GET"
    }).then(function (e) {
      selectArea.addDot(e.data.result), a.setData({
        districtData: e.data.result,
        "selectedCity.index": t.currentTarget.dataset.index,
        "selectedCity.code": l.code,
        "selectedCity.fullName": l.fullName,
        "selectedDistrict.index": 0,
        "selectedDistrict.code": e.data.result[0].code,
        "selectedDistrict.fullName": e.data.result[0].fullName
      });
    }).catch(function (e) {
      console.log(e);
    });
  },
  tapDistrict: function (e, t) {
    var a = e.currentTarget.dataset;
    t.setData({
      "selectedDistrict.index": e.currentTarget.dataset.index,
      "selectedDistrict.code": a.code,
      "selectedDistrict.fullName": a.fullName
    });
  },
  confirm: function (e, t) {
    t.setData({
      address: t.data.selectedProvince.fullName + " " + t.data.selectedCity.fullName + " " + t.data.selectedDistrict.fullName,
      isShow: !1
    });
  },
  cancel: function (e) {
    e.setData({
      isShow: !1
    });
  },
  choosearea: function (e) {
    e.setData({
      isShow: !0
    });
  }
};

module.exports = {
  SA: selectArea
};
</script>
<style>
@import "./selectarea.css";
</style>